<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/item/./scss/shop.css" />
		<link rel="stylesheet" type="text/css" href="/static/item/./scss/main.css"/>
		<link rel="stylesheet" href="/static/item/./scss/header.css" />
		<link rel="stylesheet" type="text/css" href="/static/item/./bootstrap/css/bootstrap.css"/>
	</head>
	<body>
		<div id="max">
		<header>
					<div class="min">
						<ul class="header_ul_left">
							<li class="glyphicon glyphicon-home"> <a href="/static/item/shouye.html" class="aa">首页</a></li>
							<li class="glyphicon glyphicon-map-marker"> <a href="/static/item/javascript:;">北京</a>
								<ol id="beijing">
									<li style="background: red;"><a href="/static/item/javascript:;" style="color: white;">北京</a></li>
									<li><a href="/static/item/javascript:;">上海</a></li>
									<li><a href="/static/item/javascript:;">天津</a></li>
									<li><a href="/static/item/javascript:;">重庆</a></li>
									<li><a href="/static/item/javascript:;">河北</a></li>
									<li><a href="/static/item/javascript:;">山西</a></li>
									<li><a href="/static/item/javascript:;">河南</a></li>
									<li><a href="/static/item/javascript:;">辽宁</a></li>
									<li><a href="/static/item/javascript:;">吉林</a></li>
									<li><a href="/static/item/javascript:;">黑龙江</a></li>
									<li><a href="/static/item/javascript:;">内蒙古</a></li>
									<li><a href="/static/item/javascript:;">江苏</a></li>
									<li><a href="/static/item/javascript:;">山东</a></li>
									<li><a href="/static/item/javascript:;">安徽</a></li>
									<li><a href="/static/item/javascript:;">浙江</a></li>
									<li><a href="/static/item/javascript:;">福建</a></li>
									<li><a href="/static/item/javascript:;">湖北</a></li>
									<li><a href="/static/item/javascript:;">湖南</a></li>
									<li><a href="/static/item/javascript:;">广东</a></li>
									<li><a href="/static/item/javascript:;">广西</a></li>
									<li><a href="/static/item/javascript:;">江西</a></li>
									<li><a href="/static/item/javascript:;">四川</a></li>
									<li><a href="/static/item/javascript:;">海南</a></li>
									<li><a href="/static/item/javascript:;">贵州</a></li>
									<li><a href="/static/item/javascript:;">云南</a></li>
									<li><a href="/static/item/javascript:;">西藏</a></li>
									<li><a href="/static/item/javascript:;">陕西</a></li>
									<li><a href="/static/item/javascript:;">甘肃</a></li>
									<li><a href="/static/item/javascript:;">青海</a></li>
									<li><a href="/static/item/javascript:;">宁夏</a></li>
									<li><a href="/static/item/javascript:;">新疆</a></li>
									<li><a href="/static/item/javascript:;">港澳</a></li>
									<li><a href="/static/item/javascript:;">台湾</a></li>
									<li><a href="/static/item/javascript:;">钓鱼岛</a></li>
									<li><a href="/static/item/javascript:;">海外</a></li>
								</ol>
							</li>
						</ul>
						<ul class="header_ul_right">
							<li style="border: 0;"><a href="/static/item/../登录页面\index.html" class="aa">你好，请登录</a></li>
							<li><a href="/static/item/../注册页面\index.html" style="color: red;">免费注册</a> |</li>
							<li><a href="/static/item/javascript:;" class="aa">我的订单</a> |</li>
 
						</ul>
					</div>
				</header>
				<nav>
				<div class="nav_min">
					<div class="nav_top">
						<div class="nav_top_one"><a href="/static/item/#"><img src="/static/item//img/logo1.jpg"/></a></div>
						<div class="nav_top_two"><input type="text"/><button>搜索</button></div>
						<div class="nav_top_three"><a href="/static/item/../JD_Shop/One_JDshop.html">我的购物车</a><span class="glyphicon glyphicon-shopping-cart"></span>
							<div class="nav_top_three_1">
								<img src="/static/item//img/44.png"/>购物车还没有商品，赶紧选购吧！
							</div>
						</div>
					</div>
					<div class="nav_down">
						<ul class="nav_down_ul">
							<li class="nav_down_ul_1" style="width: 24%;float: left;"><a href="/static/item/javascript:;">全部商品分类</a>

							</li>
							 
						</ul>
					</div>
				</div>
			</nav>

				</div>


			<div class="crumb-wrap">
			<div class="w">
	 
 

			</div>
		</div>
<div class="Shop">
		<div class="box">
			<div class="box-one ">
				<div class="boxx">

					<div class="imgbox">
						<div class="probox">
							<img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
							<div class="hoverbox"></div>
						</div>
						<div class="showbox">
							<img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
						</div>
					</div>

					<div class="box-lh">

						<div class="box-lh-one">
							<ul>
								<li th:each="img : ${item.images}" th:if="${!#strings.isEmpty(img.imgUrl)}">
									<img th:src="${img.imgUrl}"/>
								</li>
							</ul>
						</div>
						<div id="left">
							< </div>
								<div id="right">
									>
								</div>

						</div>

						<div class="boxx-one">
							<ul>
								<li>
									 
								</li>
								<li>

								</li>
							</ul>
						</div>

					</div>
				<div class="box-two">
					<div class="box-name" th:text="${item.info.skuTitle}">
						华为 HUAWEI Mate 10 6GB+128GB 亮黑色 移动联通电信4G手机 双卡双待
					</div>
					<div class="box-hide" th:text="${item.info.skuSubtitle}">预订用户预计11月30日左右陆续发货！麒麟970芯片！AI智能拍照！
						<a href="/static/item/"><u></u></a>
					</div>
					<div class="box-yuyue">
						<div class="yuyue-one">
							<img src="/static/item/img/7270ffc3baecdd448958f9f5e69cf60f.png" alt=""/> 预约抢购
						</div>
						<div class="yuyue-two">
							<ul>
								<li>
									<img src="/static/item/img/f64963b63d6e5849977ddd6afddc1db5.png"/>
									<span>190103</span> 人预约
								</li>
								<li>
									<img src="/static/item/img/36860afb69afa241beeb33ae86678093.png"/> 预约剩余
									<span id="timer">

									</span>
								</li>
							</ul>
						</div>
					</div>
						<div class="box-summary clear">
							<ul>
								<li>惊喜价</li>
								<li>
									<span>￥</span>
									<span th:text="${#numbers.formatDecimal(item.info.price,3,2)}">4499.00</span>
								</li>
								<li>
								 
								</li>
								<li>
									<a href="/static/item/">
										 
									</a>
								</li>
							</ul>
						</div>
						<div class="box-wrap clear">
							 
						</div>

						<div class="box-stock">
							<ul class="box-ul">
								<li>库存:</li>
								<li class="box-stock-li">
									<div class="box-stock-one">
									</div>
 

								</li>
								<li>
									<span th:text="${item.hasStock?'有货':'无货'}">无货</span>， 此商品暂时售完
								</li>
							</ul>
						</div>
						 <div class="box-stock">
							<ul class="box-ul">
								<li>重  量:</li>
								<li class="box-stock-li">
									<div class="box-stock-one">
									</div>
 

								</li>
<!--								<li  th:text="${item.info.weight}+' kg'" th:if="${!#strings.isEmpty(item.info.weight)}">-->
<!--									  10 kg-->
<!--								</li>-->
 
							</ul>
						</div>
						  
						<div class="box-attr-3">
							<div class="box-attr-2 clear"  th:each="attr:${item.saleAttr}">
								<dl>
									<dt>选择[[${attr.attrName}]]</dt>
									<dd th:each="val:${attr.attrValues}">
										<a th:attr=" class=${#lists.contains(#strings.listSplit(val.skuIds,','),item.info.skuId.toString())
                                   ? 'sku_attr_value checked': 'sku_attr_value'}, skus=${val.skuIds} "
										>
											[[${val.attrValue}]]
											<!--											<img src="/static/item/img/59ddfcb1Nc3edb8f1.jpg" /> -->
										</a>
									</dd>
								</dl>
							</div>
						</div>

						<div class="box-btns clear">
							<div class="box-btns-one">
								<form id="itemForm" action="http://cart.gmall.com:8087/addToCart" method="post">
									<input type="text" name="num" id=""  value="1"/>
									<input type="hidden" name="skuId"  th:value="${skuInfo?.id}" />

									<div class="box-btns-one1">

										<div>
											<button type="button" id="jia">
												+
											</button>
										</div>
										<div>
											<button type="button" id="jian">
												-
											</button>
										</div>

									</div>
								</form>
							</div>
							<div id="cartBtn"  style="cursor:pointer;"  canClick="1"  onclick="addToCart(this)" class="box-btns-two">
								放入购物车
							</div>
						</div>

						 
					</div>

				</div>
			</div>
			 

			<div class="ShopXiangqing">
				<div class="allLeft">
					<!--火热预约-->
					<div class="huoreyuyue">
						<h3>火热预约</h3>
					</div>
					<div class="dangeshopxingqing">
						<ul class="shopdange">
							<li>
								<a href="/static/item/##"><img src="/static/item/img/5a0afeddNb34732af.jpg"/></a>
								<p>
									<a href="/static/item/##">OPPO R11s Plus 双卡双待全面屏拍照手机香槟色 全网通(6G RAM+64G ROM)标配</a>
								</p>
								<p><strong class="J-p-20015341974">￥3699.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item/img/5a12873eN41754123.jpg"/></a>
								<p>
									<a target="_blank" title="詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）"
									   href="/static/item/item.jd.com/20348283521.html">詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待
										6+128GB 鳄鱼纹雅致版（新品预约）</a>
								</p>
								<p><strong class="J-p-20348283521">￥13999.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item/img/59ec0131Nf239df75.jpg"/></a>
								<p>
									<a target="_blank" title="斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60"
									   href="/static/item/item.jd.com/16683419775.html">斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器
										静音大吸力吸尘器TF-X60</a>
								</p>
								<p><strong class="J-p-16683419775">￥1599.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item/img/59015444N27317512.jpg"/></a>
								<p>
									<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金"
									   href="/static/item/item.jd.com/12187770381.html">斐纳（TOMEFON）
										扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
								</p>
								<p><strong class="J-p-12187770381">￥2599.00</strong></p>
							</li>
						</ul>
					</div>
					<!--看了又看-->
					<div class="huoreyuyue">
						<h3>看了又看</h3>
					</div>
					<div class="dangeshopxingqing">
						<ul class="shopdange">
							<li>
								<a href="/static/item/##"><img src="/static/item//img/59e55e01N369f98f2.jpg" /></a>
								<p>
									<a target="_blank" title="华为（HUAWEI） 华为 Mate10 4G手机  双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)" href="/static/item//item.html.bak/item.jd.com/17931625443.html">华为（HUAWEI） 华为 Mate10 4G手机 双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)</a>
									<p><strong class="J-p-17931625443">￥4766.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item//img/584fcc3eNdb0ab94c.jpg" /></a>
								<p>
									<a target="_blank" title="华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待" href="/static/item//item.html.bak/item.jd.com/3749093.html">华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待</a>
								</p>
								<p><strong class="J-p-3749093">￥4899.00</strong></p>
							</li>
							<li>
								<!--shopjieshao-->
								<a href="/static/item/##"><img src="/static/item//img/59eb0df9Nd66d7585.jpg" /></a>
								<p>
									<a target="_blank" title="华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版" href="/static/item//item.html.bak/item.jd.com/12306211773.html">华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版</a>
								</p>
								<p><strong class="J-p-12306211773">￥4088.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item//img/5a002ba3N126c2f73.jpg" /></a>
								<p>
									<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金" href="/static/item//item.html.bak/item.jd.com/12187770381.html">斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
								</p>
								<p><strong class="J-p-12187770381">￥2599.00</strong></p>
							</li>
						</ul>
						<img src="/static/item//img/5a084a1aNa1aa0a71.jpg" />
					</div>
				</div>
				<!--商品介绍-->
				<div class="allquanbushop">
					<ul class="shopjieshao">
						<li class="jieshoa" style="background: #e4393c;">
							<a style="color: white;">商品介绍</a>
						</li>
						<li class="baozhuang">
							<a >规格与包装</a>
						</li>
						<li class="baozhang">
							<a href="/static/item/##">售后保障</a>
						</li>
						<li class="pingjia">
							<a href="/static/item/##">商品评价(4万+)</a>
						</li>
						<li class="shuoming">
							<a href="/static/item/##">预约说明</a>
						</li>

					</ul>
 
					<ul class="shopjieshaos posi" style="display: none;">
						<li class="jieshoa" style="background: #e4393c;">
							<a href="/static/item/#li1" style="color: white;">商品介绍</a>
						</li>
						<li class="baozhuang">
							<a href="/static/item/#li2">规格与包装</a>
						</li>
						<li class="baozhang">
							<a href="/static/item/#li3">售后保障</a>
						</li>
						<li class="pingjia">
							<a href="/static/item/#li4">商品评价(4万+)</a>
						</li>
						<li class="shuoming">
							<a href="/static/item/#li5">预约说明</a>
						</li>
					</ul>

					<!--商品详情-->
					<div class="huawei">
						<ul class="xuanxiangka">
							<li class="jieshoa actives" id="li1">
								<div class="shanpinsssss">
									<p>
										<a href="/static/item/#">品牌:华为（HUAWEI）</a>
									</p>
									<table>
										<tr>
											<td>
												<a href="/static/item/##">商品名称：华为Mate 10</a>
											</td>
											<td>
												<a href="/static/item/##">商品毛重：0.58kg</a>
											</td>
											<td>
												<a href="/static/item/##">商品编号：5544038</a>
											</td>
											<td>
												<a href="/static/item/##">商品产地：中国大陆</a>
											</td>
										</tr>
										<tr>
											<td>
												<a href="/static/item/##">系统：安卓（Android）</a>
											</td>
											<td>
												<a href="/static/item/##">前置摄像头像素：800万-1599万</a>
											</td>
											<td>
												<a href="/static/item/##">后置摄像头像素：2000万及以上，1200万-1999万</a>
											</td>
											<td>
												<a href="/static/item/##">机身内存：128GB</a>
											</td>
										</tr>
										<tr>
											<td colspan="4">
												<a href="/static/item/##">全面屏，双卡双待，指纹识别，Type-C，VoLTE，2K屏，拍照神器，支持NFC，商务手机，安全手机，分辨率10</a>
											</td>
										</tr>
									</table>
									<img class="xiaoguo" src="/static/item//img/5a0d4181Nf70c5ebf.jpg" th:each="descp: ${#strings.listSplit(item.desc.decript, ',')}"/>
									<div class="guiGebox guiGebox1">
										<div class="guiGe">
											<h3>主体</h3>
											<dl>
												<dt>品牌</dt>
												<dd>华为(HUAWEI)</dd>
												<dt>型号</dt>
												<dd class="Ptable-tips">
													<a href="/static/item/#"><i>？</i></a>
												</dd>
												<dd>ALP-AL00</dd>
												<dt>入网型号</dt>
												<dd class="Ptable-tips">
													<a href="/static/item/#"><i>？</i></a>
												</dd>
												<dd>ALP-AL00</dd>
												<dt>上市年份</dt>
												<dd>2017年</dd>
												<dt>上市时间</dt>
												<dd>10月</dd>
											</dl>
										</div>
										<div class="package-list">
											<h3>包装清单</h3>
											<p>手机（含内置电池） X 1、5A大电流华为SuperCharge充电器X 1、5A USB数据线 X 1、半入耳式线控耳机 X 1、快速指南X 1、三包凭证 X 1、取卡针 X 1、保护壳 X 1</p>
										</div>
									</div>
								</div>
							</li>
							<li class="baozhuang actives" id="li2">
								<div class="guiGebox" th:each="group:${item.groupAttrs}">
									<div class="guiGe">
										<h3 th:text="${group.groupName}">主体</h3>
										<dl>
											<div th:each="attr:${group.attrs}">
											<dt th:text="${attr.attrName}">品牌</dt>
											<dd th:text="${attr.attrValue}">华为(HUAWEI)</dd>
											</div>
										</dl>
									</div>

									<div class="package-list">
										<h3>包装清单</h3>
										<p>手机（含内置电池） X 1、5A大电流华为SuperCharge充电器X 1、5A USB数据线 X 1、半入耳式线控耳机 X 1、快速指南X 1、三包凭证 X 1、取卡针 X 1、保护壳 X 1</p>
									</div>
								</div>
							</li>
							<!--包装-->
							<li class="baozhang actives" id="li3">
								<div class="oBox">
		<div class="shuoHou">
			<div class="baoZhang">
				<h2>售后保障</h2>
			</div>
		</div>
		<!--厂家服务-->
		 
			<div class="lianBao">
	 
			</div>
 
		</div>



							</li>
							<!--评价-->
							<li class="PINgjia actives" id="li4">
								 
						</ul>
					</div>
				</div>
			</div>
		</div>


		<input id="skuId" type="text"  th:value= " ${skuInfo?.id}"  />

		<div class="Fixedbian">
			<ul>
				<li class="li1"><a class="aaa" href="/static/item/##">顶部</a></li>
			</ul>
		</div>
		<div class="gouwuchexiaguo">
			<img src="/static/item//img/44.png" />
			<span>购物车还没有商品，赶紧选购吧！</span>
		</div>
	</body>

	<script src="/static/item/./js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/item/./js/js.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
        function addToCart(obj){
            var canClick = $(obj).attr("canClick");
            if(canClick=='0'){
                return ;
            }
            $("#itemForm").submit();
        }

        function switchSkuId() {
            // 被选中属性
            var checkDivs = $(".redborder div");
            var valueIds="";
            // 拼接成属性值串
            for (var i = 0; i < checkDivs.length; i++) {
                var saleAttrValueDiv = checkDivs.eq(i);
                if(i>0){
                    valueIds= valueIds+"|";
                }
                valueIds=valueIds+saleAttrValueDiv.attr("value");
            }
            //页面上的hashjson
            var valuesSku = $("#valuesSku").attr("value");
            var valuesSkuJson=JSON.parse(valuesSku);

            // 看看hash有没有
            var skuId= valuesSkuJson[valueIds];
            // 当前sku
            var skuIdSelf=$("#skuId").val();

            // 判断是否跳转
            if(skuId){
                if(skuId==skuIdSelf){
                    $("#cartBtn").attr("class","box-btns-two");
                }else{
                    window.location.href="/static/item//"+skuId+".html";
                }
            }else{
                $("#cartBtn").attr("class","box-btns-two-off");
            }
        }
	</script>
<script >
	$(".sku_attr_value").click(function (){
		// 1、点击的元素添加上自定义的属性。为了识别我们是刚才被点击的
		let skus = new Array();
		let curr = $(this).attr("skus").split(",");

		//去掉同一行的所有的checked
		$(this).parent().parent().find(".sku_attr_value").removeClass("checked");
		$(this).addClass("checked");
		changeCheckedStyle();

		$("a[class='sku_attr_value checked']").each(function () {
			skus.push($(this).attr("skus").split(","));
		});

		let filterEle = skus[0];
		for (let i = 1; i < skus.length; i++) {
			filterEle = $(filterEle).filter(skus[i])[0];
		}

		location.href = "http://item.csuonlinemall.com/" + filterEle + ".html";

		return false;
	});
	$(function () {
		changeCheckedStyle();
	});
	function changeCheckedStyle() {
		$(".sku_attr_value").parent().css({"border": "solid 1px #ccc"});
		$("a[class='sku_attr_value checked']").parent().css({"border": "solid 1px red"});
	};
</script>
</html>
